<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>

    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/element-plus.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />

    <style>
      #app {
        width: 400px;
        margin: 150px auto 0;
      }
    </style>

    <script src="./js/config.js"></script>

    <script src="./js/vue3.js"></script>
    <script src="./js/element-plus.js"></script>
    <script src="./js/element-plus-icon.js"></script>
    <script src="./js/locale/zh-cn.js"></script>
    <script type="module">
      import Http from './js/http.js'

      window.onload = function () {
        /** 创建app */
        const app = Vue.createApp({
          data() {
            return {
              login: {
                name: 'admin',
                password: '123456',
              },
            }
          },
          methods: {
            submit() {
              this.$refs.loginForm
                .validate()
                .then(() => {
                  Http.post('/admin/login', this.login).then((res) => {
                    if (res && res.code === 200) {
                      localStorage.setItem('token', res.data)
                      location.href = '/index.html'
                    }
                  })
                })
                .catch((err) => {})
            },
          },
        })
        /**  */
        window.ElMessage = ElementPlus.ElMessage

        /** ElementPlus */
        app.use(ElementPlus, { locale: ElementPlusLocaleZhCn })

        app.mount('#app')
      }
    </script>
  </head>
  <body>
    <div id="app" v-cloak>
      <el-form ref="loginForm" :model="login" label-width="140px">
        <el-form-item label="用户名" required>
          <el-input v-model="login.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="login.password" type="password" placeholder="密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </body>
</html>
